<!DOCTYPE html>
<html class="" lang="en">
<head>
	<title>Hitech</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
		<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
  		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
	   <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
	   <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>


<th:block th:include="header"/>


	<div id="single_product" class="single_product_page animate__animated animate__fadeInUp">

		<div class="sp_header bg-white p-3">
			<div class="container custom_container">	
				<div class="row">
					<div class="col-12">
						<ul>
							<li class="d-inline-block font-weight-bolder"><a href="/index">首页</a></li>
							<li class="d-inline-block hr_ font-weight-bolder"><a href="#" th:text="${waresInfo.waresType}"></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>


		<div class="container custom_container sp_pro_container ">
			<div class="row sh_page">
				<div class="col-xl-5 col-md-6 col-12">
					<div id="content" class="page-content">

						<div id="photo-view-container">
							<div class="layui-carousel" id="test1">
								<div carousel-item="">
									<div class="photo-holder" th:each="pics:${pics}"><img th:src="${pics.avatar}" style="width: 500px"></div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="col-xl-7 col-md-6 col-12">

					<div class="sp_product_detail">
						
						<h1 class="font-weight-bold text-uppercase"><a href="#" th:text="${waresInfo.waresName}"></a></h1>

						<span class="sp_price font-weight-bold" th:text="${waresInfo.price}"></span>RMB

						<div class="text-secondary sp_tax">不含税哦.</div>

						<div class="sp_add_info my-3">
							<ul>
								<li class="sku my-2">
									<span class="text-uppercase font-weight-bolder">单位:</span>
									<span th:text="${waresInfo.unit}"></span>
								</li>
								<li class="availability my-2">
									<span class="font-weight-bolder">库存:</span>
									<span class="p_quantity" th:text="${waresInfo.store}"></span>
								</li>
							</ul>
						</div>

						<div class="sp_text">
							<ul>
								 <li class="my-2">自2023年以来，我们一直在创造精心设计的系列 </li>
								 <li class="my-2" th:text="${waresInfo.feature}"></li>
							</ul>
						</div>

						<div class="sp_rating">
							<i class="fa fa-star" aria-hidden="true"></i>
							<i class="fa fa-star" aria-hidden="true"></i>
							<i class="fa fa-star" aria-hidden="true"></i>
							<i class="fa fa-star" aria-hidden="true"></i>
							<i class="fa fa-star" aria-hidden="true"></i>
						</div>


						<div class="layui-input-inline">
							<ul>
								<li class="font-weight-bold text-uppercase my-2">颜色:</li>
									<select id="memberWaresColor">
										<li th:each="name : ${#strings.arraySplit(waresInfo.color, ',')}">
										<option th:text="${name}"></option>
										</li>
									</select>
							</ul>
						</div>
<!--就这-->

						<div class="sp_size">
							<ul>
								<li class="font-weight-bold text-uppercase my-2">版本:</li>
								<select id="memberWaresVersion">
									<li th:each="name : ${#strings.arraySplit(waresInfo.version, ',')}">
										<option th:text="${name}"></option>
									</li>
								</select>
							</ul>
						</div>



					    <div class="sp_about my-3">

					      	<span class="sp_comn1">
								<a href="#" class="font-weight-bolder" data-toggle="modal" data-target="#shippingModal">
								<i class="fas fa-box-open"></i><span th:text="${waresInfo.deliveryType}"></span>
								</a>
							</span>

					      	

					      	<span class="sp_comn2"><a href="#" class="font-weight-bolder" data-toggle="modal" data-target="#question_Modal"><i class="far fa-envelope"></i>联系客服</a></span>

					      	<div class="modal fade" id="question_Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							        <h5 class="modal-title " id="exampleModalLabel">shipping</h5>
							        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
							          <span aria-hidden="true">&times;</span>
							        </button>
							      </div>
							      <div class="modal-body que_form">
							      	<h6>have a any question?</h6>
							      	<form>
									  <div>
									  	<div class="col-12 sp_form pl-0 pb-3">
									      <textarea class="form-control"  rows="3" placeholder="Enter Your Message"></textarea>
									    </div>
									    <div class="col-12 sp_form pl-0 pb-3">
									      <input type="text" class="form-control" placeholder="Enter Your Name">
									    </div>
									    <div class="col-12 sp_form pl-0 pb-3">
									      <input type="email" class="form-control" placeholder="Enter Your Mail">
									    </div>
									    <div class="col-12 sp_form pl-0 pb-3 ">
									      <input type="tel" pattern=".{10}" class="form-control" id="other_number" oninput="check(this)" required placeholder="Enter Your Phone">
									    </div>
									    <div class="col-12 sp_form pl-0 pb-3">
									    	<button type="submit" class="btn btn-primary">submit review</button>
									    </div>
									  </div>
									</form>
							      </div>
							      </div>
							  </div>
							</div>
					    </div>

					    <div class="sp_counter">
					      <div class="sp_c_count1">
							<div class="number">
								<div class="sp_counter ">

								 <div class="input-group">
					                <span class="input-group-btn">
					              		<button type="button" class="btn btn-default btn-number p-0" disabled="disabled" data-type="minus" data-field="quant[1]"><span class="minus">-</span></button>
					                </span>
					                <input type="number" name="quant[1]" class="form-control input-number" value="1" min="1" max="10" id="waresNum">
					                <span class="input-group-btn">
					                	<button type="button" class="btn btn-default btn-number p-0" data-type="plus" data-field="quant[1]"><span class="plus">+</span></button>
					                </span>
					            </div>

						      </div>
							</div>
					      </div>
					      	<span class="sp_c_count2">
					      	<a  class="btn btn-primary primary" id="addCart">加入到购物车</a>
					      </span>
					    </div>

					    <div class="form-check sp_check my-3">
							  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" checked>
							  <label class="form-check-label" for="defaultCheck1">我同意这些条款和条件</label>
						</div>

						<div class="sp_buy">
							<button type="button" class="btn btn-primary primary">立即购买</button>
						</div>
						<div class="sp_wish_com my-3">
					      	<span class="sp_comp1"><a href="#" class="text-uppercase font-weight-bolder " data-toggle="modal" data-target="#wish_Modal"><i class="far fa-heart"></i>加入到我的喜欢</a></span>

					      	

					      	<span class="sp_comp2"><a href="#" class="text-uppercase font-weight-bolder"><i class="fas fa-tasks"></i>货比三家</a></span>
					    </div>
						<div class="sp_ad_info">
							<ul>
								<li class="my-2">
									<span>供应商:</span><span><a href="#" class="text-muted pl-2" th:text="${waresInfo.supply}"></a></span>
								</li>
								<li class="my-2">
									<span>商品类型:</span><span class="text-muted pl-2" th:text="${waresInfo.waresType}"></span>
								</li>
								<li class="my-2">
									<span>条形码:</span><span class="text-muted pl-2" th:text="${waresInfo.barCode}"></span>
								</li>
								<li class="my-2">
									<span>标签:</span>
									<span>
										<a href="#" class="text-muted px-2" th:text="${waresInfo.labels}"></a>
									</span>
								</li>
							</ul>
						</div>
						<div class="sp_collapse_block my-4">
							<div class="accordion" id="collapse_block">
							  <div class="card">
							    <div class="card-header" id="heading_One">
							      <h2 class="mb-0">
							        <button class="btn btn-link btn-block text-left " type="button" data-toggle="collapse" data-target="#collapse_One" aria-expanded="true" aria-controls="collapse_One">
							          描述<span class="float-right"><i class="fas fa-angle-down"></i></span>
							        </button>
							      </h2>
							    </div>

							    <div id="collapse_One" class="collapse show" aria-labelledby="heading_One" data-parent="#collapse_block">
							      <div class="card-body">
							      	<p class="mb-2" th:text="${waresInfo.feature}"></p>
							      </div>
							    </div>

							  </div>

							  <div class="card">
							    <div class="card-header" id="heading_Two">
							      <h2 class="mb-0">
							        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse_Two" aria-expanded="false" aria-controls="collapse_Two">
							          额外的信息<span class="float-right"><i class="fas fa-angle-down"></i></span>
							        </button>
							      </h2>
							    </div>
							    <div id="collapse_Two" class="collapse" aria-labelledby="heading_Two" data-parent="#collapse_block">
							      <div class="card-body">
									  <p class="mb-2" th:text="${waresInfo.addInfo}"></p>
							      </div>
							    </div>
							  </div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<th:block th:include="end"/>
</div> <!-- single_product_page -->
	
	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
 	<script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.magnific-popup.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/wow.min.js"></script>

	<script>
						function getTimeRemaining(endtime) {
						  var t = Date.parse(endtime) - Date.now();
						  var seconds = Math.floor((t / 1000) % 60);
						  var minutes = Math.floor((t / 1000 / 60) % 60);
						  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
						  var days = Math.floor(t / (1000 * 60 * 60 * 24));
						  return {
						    'total': t,
						    'days': days,
						    'hours': hours,
						    'minutes': minutes,
						    'seconds': seconds
						  };
						}

						function initializeClock(id, endtime) {
						  var clock = document.getElementById(id);
						  var daysSpan = clock.querySelector('.days');
						  var hoursSpan = clock.querySelector('.hours');
						  var minutesSpan = clock.querySelector('.minutes');
						  var secondsSpan = clock.querySelector('.seconds');

						  function updateClock() {
						    var t = getTimeRemaining(endtime);

						    if (t.total <= 0) {
						      document.getElementById("clockdiv").className = "hidden-div";
						      document.getElementById("timeIsNow").className = "visible-div";
						      clearInterval(timeinterval);
						      return true;
						    }

						    daysSpan.innerHTML = t.days;
						    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
						    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
						    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

						  }

						  updateClock();
						  var timeinterval = setInterval(updateClock, 1000);
						}


						var deadline = '2022-12-14T20:14:00+02:00';

						initializeClock('clockdiv', deadline);




						window.onload = function(){
						// load thumbnails
						photo       = document.querySelectorAll('.photo-item');
						photoLength = photo.length;
						for(i=0; i<photoLength; i++){
						photoW = photo[i].naturalWidth;
						photoH = photo[i].naturalHeight;
						if(photoW >= photoH){
						photo[i].style.height = '100px';
						}
						else{
						photo[i].style.width = '100px';
						}
						}
						conentW = photoLength * 115;
						document.getElementById('photo-container').style.width = conentW+'px';

						// load first photo
						firstPhoto    = document.querySelectorAll('.photo-item');
						firstPhoto    = firstPhoto[0];
						firstPhotoUrl = firstPhoto.src;
						firstPhotoAlt = firstPhoto.alt;
						document.getElementById('photo-display').innerHTML = '<a href="'+firstPhotoUrl+'" id="selected-photo"><img src="'+firstPhotoUrl+'" id="selected-photo" alt=""></a>';
						}


						marginL = 0;
						function leftRight(obj){
						spaceLeft   = document.getElementById('photo-container').style.marginLeft;
						spaceLeft   = spaceLeft.replace('px', null);
						spaceLeft   = parseInt(spaceLeft);
						step        = 300;
						totalLength = document.querySelectorAll('.photo-item').length;
						totalLength *= -115;
						objId = obj.id;
						if(objId == 'left'){
						if(spaceLeft >= -step){
						marginL = 0;
						}
						else{
						marginL += step;
						}
						}
						if(objId == 'right'){
						if(spaceLeft <= totalLength + 500 + step){
						marginL = totalLength  + 500;
						}
						else{
						marginL -= step;
						}
						}
						document.getElementById('photo-container').style.marginLeft = marginL+'px';
						}
						function viewPhoto(obj){
						objUrl = obj.src;
						objAlt = obj.alt;
						document.getElementById('photo-display').innerHTML = '<a href="'+objUrl+'" id="selected-photo"><img src="'+objUrl+'" id="selected-photo" alt=""></a>';
						}

					</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js"></script>
<script>

	layui.use([ 'form', 'table', 'layer','laytpl','carousel'], function() {
		var $ = layui.jquery, form = layui.form, table = layui.table;
		layer = layui.layer;
		var laytpl = layui.laytpl;
		var carousel = layui.carousel;

		//给购物车按钮绑定事件
		$("body").on("click","#cart",function (){
			//判断一下是否登录
			$.post("/cart/loginOrNO",function (res){
				if(res===1){
					window.top.location.href="/cart/cartPage";//登陆了-跳转购物车
				}else{
					window.top.location.href="/login";//没登录-跳转登录页面
				}

			});
		});

      //获取当前商品id
		var waresId='[[${waresInfo.id}]]';
		$("#addCart").on("click",function (){
			//获得选择的商品的颜色和版本
			var memberWaresColor=$("#memberWaresColor").val();
			var memberWaresVersion=$("#memberWaresVersion").val();
				$.post("/cart/addCart?waresId="+waresId+"&&waresNum="+$("#waresNum").val()+"&&memberWaresColor="+memberWaresColor+"&&memberWaresVersion="+memberWaresVersion,function (){
					layer.msg("加入购物车成功!");
				});

		});


		<!--轮播图设置-->
		//常规轮播
		carousel.render({
			elem: '#test1',
			width: 600,
			height:700,
			interval:2000
		});
	});
</script>

</body>
</html>


					